<template>
  <div style="margin-top: 60px;margin-left: 330px;width: 300px;">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="用户名" prop="dAccount">
        <el-input v-model="ruleForm.dAccount"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="dPassword">
        <el-input v-model="ruleForm.dPassword"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="dName">
        <el-input v-model="ruleForm.dName"></el-input>
      </el-form-item>

      <el-form-item label="性别" prop="dSex">
        <el-radio-group v-model="ruleForm.dSex">
          <el-radio v-model="ruleForm.dSex" label="男">男</el-radio>
          <el-radio v-model="ruleForm.dSex" label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系电话" prop="dPhone">
        <el-input v-model.number="ruleForm.dPhone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {nanoid} from 'nanoid'

export default {
  name: "DormitoryAdminAdd",
  data() {
    return {
      category:null,
      ruleForm: {
        dId:nanoid(),
        dAccount: '',
        dPassword: '',
        dName:'',
        dSex: '',
        dPhone: ''
      },
      rules: {
        dAccount: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        dPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        dName: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        dSex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        dPhone: [
          { required: true, message: '请填写电话号码', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      const _this=this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.get('http://192.168.163.234:8081/dormitoryAdmin/save', {params:_this.ruleForm}).then(
              function (response) {
                if (response.data.code==0){
                  _this.$alert(_this.ruleForm.dName+'添加成功!','',{
                    confirmButtonText:'确定',
                    callback:action => {
                      _this.$router.push('/dormitoryAdminManager')
                    }
                  })
                }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>

</style>
